<template>
  <view class="content">
    <!-- #ifndef MP-TOUTIAO -->
    <singleHeader
      :pageTitle="this.$t('newAdmin.order.LogisticsInformation')"
    ></singleHeader>
    <!-- #endif -->

    <view class="tab">
      <view
        class="item"
        v-for="item of tabList"
        :class="[getClass(item.id)]"
        :key="item.id"
        @click="changTab(item)"
      >
        <view class="bg"><text></text></view>
        <view class="name">{{ item.name }}</view>
      </view>
    </view>

    <view class="mForm">
      <view class="mForBox">
        <view
          v-if="form.is_express === '1'"
          class="mFormItem"
          @click="openPicker('showPop')"
        >
          <view class="let">{{
            $t("newAdmin.order.CourierServicesCompany")
          }}</view>
          <view class="rig">
            <view class="inp">
              <view class="input">{{ form.express }}</view>
            </view>
            <view class="icon"><i class="iconfont icon-arrow-right"></i></view>
          </view>
        </view>
        <u-select
          v-model="showPop"
          :list="expressList"
          @confirm="(e, i) => bindPickerChange(e, 'single-column', 'express')"
        ></u-select>

        <view v-if="form.is_express === '1'" class="mFormItem">
          <view class="let">{{ $t("newAdmin.order.Recipientzipcode") }}</view>
          <view class="rig">
            <view class="inp"
              ><u-input
                type="text"
                v-model="form.post_code"
                :placeholder="
                  $t('newAdmin.order.PleaseEnter') +
                  $t('newAdmin.order.Recipientzipcode')
                "
              ></u-input
            ></view>
          </view>
        </view>

        <view v-if="form.is_express === '1'" class="mFormItem">
          <view class="let">{{ $t("newAdmin.order.courierNumber") }}</view>
          <view class="rig">
            <view class="inp"
              ><u-input
                type="text"
                v-model="form.express_no"
                :placeholder="
                  $t('newAdmin.order.PleaseEnter') +
                  $t('newAdmin.order.courierNumber')
                "
              ></u-input
            ></view>
          </view>
        </view>
        <view class="mFormItem">
          <view class="let">{{ $t("newAdmin.order.content") }}</view>
          <view class="rig">
            <view class="inp"
              ><u-input
                type="text"
                v-model="form.words"
                :placeholder="
                  $t('newAdmin.order.PleaseEnter') +
                  $t('newAdmin.order.content')
                "
              ></u-input
            ></view>
          </view>
        </view>
      </view>
    </view>

    <view class="tools-pof"
      ><view class="btn" @click="submit">{{
        $t("newAdmin.order.ConfirmShipment")
      }}</view></view
    >
  </view>
</template>

<script>
import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";

import { storeAdminGetExpress, storeAdminOrderSend } from "@/api/admin";
export default {
  components: {
    singleHeader,
  },

  data() {
    return {
      showPop: false,
      order_id: undefined,
      expressList: [],
      diabled: false,

      tabList: [
        { id: "1", name: this.$t("newAdmin.order.fastMail") },
        { id: "0", name: this.$t("newAdmin.order.noFastMail") },
      ],
      form: {
        express: "", // 快递公司
        is_express: "1", // 1是 2.否
        express_no: "", // 运单号
        post_code: "", // 收件人邮编
        words: "", // 商家备注
      },
    };
  },

  computed: {
    getClass() {
      return (id) => {
        return id === this.form.is_express ? `on item${id}` : `item${id}`;
      };
    },
  },

  onLoad(opi) {
    this.$utils.hideShareMenu();
    this.order_id = opi.id;
  },

  mounted() {
    this.storeAdminGetExpress();
  },

  methods: {
    changTab(item) {
      if (this.form.is_express === item.id) {
        return;
      }

      this.form.is_express = item.id;
    },

    openPicker(el) {
      this[el] = true;
    },

    bindPickerChange(e, mode, el) {
      switch (mode) {
        case "single-column":
          this.form[el] = e[0].label;
          break;
      }
    },

    storeAdminGetExpress() {
      storeAdminGetExpress().then((res) => {
        if (res.code === 0) {
          if (res.data.express.length) {
            this.expressList = res.data.express.map((el, i) => {
              return {
                label: el,
                value: i,
              };
            });
          }
        }
      });
    },

    storeAdminOrderSend(data) {
      this.diabled = true;
      storeAdminOrderSend(data)
        .then((res) => {
          this.diabled = false;
          if (res.code === 0) {
            this.$utils.showModal(
              this.$t("newAdmin.warning.title"),
              res.msg,
              false,
              () => {
                uni.navigateBack();
              }
            );
            return;
          }

          this.$utils.toast(res.msg);
        })
        .catch(() => {
          this.diabled = false;
        });
    },

    submit() {
      let { form, order_id, diabled } = this;

      if (this.diabled) {
        return;
      }

      if (form.is_express === "1") {
        if (!form.express) {
          this.$utils.toast(
            this.$t("newAdmin.warning.pleaseSelect") +
              this.$t("newAdmin.order.CourierServicesCompany")
          );
          return;
        }

        if (!form.post_code) {
          this.$utils.toast(
            this.$t("newAdmin.warning.PleaseFillIn") +
              this.$t("newAdmin.order.Recipientzipcode")
          );
          return;
        }

        if (!form.express_no) {
          this.$utils.toast(
            this.$t("newAdmin.warning.PleaseFillIn") +
              this.$t("newAdmin.order.courierNumber")
          );
          return;
        }
      }

      this.storeAdminOrderSend({
        ...form,
        order_id,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
  background: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 150rpx;
}

.tools-pof {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10rpx 30rpx calc(env(safe-area-inset-bottom) + 10rpx);
  background: #fff;
  text-align: right;
}

.tools-pof .btn {
  display: inline-block;
  border-radius: 32px;
  width: 180rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  background: #f0250e;
  color: #fff;
  border: 1px solid #f0250e;
  font-size: 26rpx;
}

.mForm {
  background: #fff;
}

.mForBox {
  border-radius: 20rpx;
  overflow: hidden;
}

.mFormItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  height: 100rpx;
  font-size: 30rpx;
  color: #1d1d1d;
  border-bottom: 1px solid #f2f2f2;

  .let {
    width: 200rpx;
  }

  .rig {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: 10rpx;
  }

  .inp {
    flex: 1;
  }

  .input {
    height: 100rpx;
    line-height: 100rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .icon-arrow-right {
    font-size: 22rpx;
    color: #888;
  }

  .inpSort {
    margin-left: 10rpx;
  }

  &:last-of-type {
    border-bottom: 0;
  }
}

.tab {
  position: relative;
  display: flex;
  margin-top: 30rpx;
  border-radius: 16rpx 16rpx 0px 0px;
  background: #f2f2f2;

  .item {
    position: relative;
    width: 50%;
    height: 80rpx;
    line-height: 80rpx;
    color: #8c8c8c;
    font-size: 26rpx;
    text-align: center;

    &.on {
      color: #262626;

      .bg {
        opacity: 1;
      }
    }
  }

  .item1 {
    .bg text {
      left: 100%;
      border-bottom: 90rpx solid #fff;
      border-right: 20rpx solid transparent;
    }
  }

  .item0 {
    .bg text {
      right: 100%;
      border-bottom: 90rpx solid #fff;
      border-left: 20rpx solid transparent;
    }
  }

  .name {
    position: relative;
    z-index: 2;
  }

  .bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 90rpx;
    background: #fff;
    border-radius: 16rpx 16rpx 0 0;
    opacity: 0;
    -webkit-transition: 0.3s all;
    transition: 0.3s all;

    text {
      position: absolute;
      bottom: 0;
    }
  }
}
</style>
